<template>
  <div>
    <button @click="add1">add1</button>
    <button @click="add2">add2</button>
    <button @click="add3">add3</button>
    <ul>
      <li v-for="t in talkStore.talkList" :key="t.id">{{ t.title }}</li>
    </ul>
    <hr />
    <ul>
      <li v-for="t in allTalk" :key="t.id">{{ `${t.id} ${t.content}` }}</li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { useTalkStore } from '@/stores/talk';
import axios from 'axios';
import { nanoid } from 'nanoid';
import { storeToRefs } from 'pinia';

const talkStore = useTalkStore()
const { allTalk } = storeToRefs(talkStore)
const add1 = async () => {
  const res = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
  talkStore.addTalk({ id: nanoid(), title: res.data.content })
}
const add2 = () => {
  talkStore.talkList.push({ id: 3, title: '你好啊2' })
}
const add3 = () => {
  const talkList=[...talkStore.talkList, { id: 3, title: '你好啊3' }] 
  // @ts-ignore
  talkStore.$patch({ talkList})
}
talkStore.$subscribe((mutate, state) => {
  console.log('talkStore 的state 发生了变化', mutate, state)
  localStorage.setItem('talkList', JSON.stringify(state.talkList))
})
</script>

<style lang="scss" scoped></style>
